<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="main">
			<div class="g-container">
				<div class="img1"></div>
				<div class="img2"></div>
			</div>
			<div class="zoom"></div>
		</div>
	</body>
	<style>
		.main {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.g-container {
			position: relative;
			width: 500px;
			height: 300px;
		}
		.img1 {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url(./assets/s11.png) no-repeat center;
			background-size: cover;
		}

		.img2 {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url(./assets/s8.png) no-repeat center;
			background-size: cover;
			mask: linear-gradient(45deg, #000 40%, transparent 60%);
			/* mask: url(https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/uploads/api/202408/6e6db64c83fe62d970b73d18f31c3868.png) ; */
			z-index: 9;
			mask-size: 2000% 100%;
			animation: maskMove 2s steps(10000) infinite;
		}

		@keyframes maskMove {
			from {
				mask-position: 0 0;
			}
			to {
				mask-position: 100% 0;
			}
		}
		.zoom {
			width: 100px;
			height: 70px;
			background: url(./assets/zoom.png);
			background-size: 2000% 100%;
			background-position: 0 0;
			animation: maskMove2 20s steps(20) infinite;
		}

		@keyframes maskMove2 {
			from {
				background-position: 0 0;
			}
			to {
				background-position: 100% 0;
			}
		}

		
	</style>
</html>
